<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
	request.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html lang="en">
<head>

	<!-- start: Meta -->
	<meta charset="utf-8">
	<title>图表管理 - 同城快递</title>
	<meta name="description" content="Bootstrap Metro Dashboard">
	<meta name="author" content="">
	<meta name="keyword" content="">
	<!-- end: Meta -->

	<!-- start: Mobile Specific -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- end: Mobile Specific -->

	<!-- start: CSS -->
	<base href="${basePath}/staticafter/">
	<link id="bootstrap-style" href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
	<link id="base-style" href="css/style.css" rel="stylesheet">
	<link id="base-style-responsive" href="css/style-responsive.css" rel="stylesheet">
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext'
		  rel='stylesheet' type='text/css'>
	<!-- end: CSS -->


	<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<link id="ie-style" href="css/ie.css" rel="stylesheet">
	<![endif]-->

	<!--[if IE 9]>
	<link id="ie9style" href="css/ie9.css" rel="stylesheet">
	<![endif]-->

	<!-- start: Favicon -->
	<link rel="shortcut icon" href="img/favicon.ico">
	<!-- end: Favicon -->


</head>

<body>
<!-- start: Header -->
<c:import url="header.jsp"></c:import>
<!-- start: Header -->

<div class="container-fluid-full">
	<div class="row-fluid">

		<c:import url="left.jsp"></c:import>

		<!-- end: Main Menu -->

		<noscript>
			<div class="alert alert-block span10">
				<h4 class="alert-heading">Warning!</h4>
				<p>You need to have <a href="" target="_blank">JavaScript</a> enabled to use this site.</p>
			</div>
		</noscript>

		<!-- start: Content -->
		<div id="content" class="span10">


			<ul class="breadcrumb">
				<li>
					<i class="icon-home"></i>
					<a href="main.jsp">Home</a>
					<i class="icon-angle-right"></i>
				</li>
				<li><a href="${basePath}/japafter/companystaff.action">Dashboard</a></li>
			</ul>

			<div class="row-fluid">

				<div class="container-fluid" style="margin-bottom:90px;">
					<button type="button" class="btn btn-success" onclick="chartOne()">员工接单饼状图显示</button>
					<br>
					<button type="button" class="btn btn-success" onclick="chartOneto()">员工派单饼状图显示</button>
					<br>
					<button type="button" class="btn btn-success" onclick="chartTwo()">员工接单柱状图显示</button>
					<br>
					<button type="button" class="btn btn-success" onclick="chartTwoto()">员工派单柱状图显示</button>
					<br>
				</div>

				<%--饼状图显示--%>
				<div id="main1" style="margin-left: 50px;height: 600px;width: 600px;float:left;"></div>
				<div id="main3" style="margin-left: 50px;height: 600px;width: 600px;float:left;"></div>
				<%--柱状图显示--%>
				<div id="main2" style="margin-left: 50px;height: 600px;width: 600px;float:left;"></div>
				<div id="main4" style="margin-left: 50px;height: 600px;width: 600px;float:left;"></div>
			</div>

		</div><!--/.fluid-container-->
	</div><!--/#content.span10-->
</div><!--/fluid-row-->

<div class="modal hide fade" id="myModal">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">×</button>
		<h3>Settings</h3>
	</div>
	<div class="modal-body">
		<p>Here settings can be configured...</p>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" data-dismiss="modal">Close</a>
		<a href="#" class="btn btn-primary">Save changes</a>
	</div>
</div>

<div class="common-modal modal fade" id="common-Modal1" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-content">
		<ul class="list-inline item-details">
			<li><a href="http://sc.chinaz.com">Admin templates</a></li>
			<li><a href="http://sc.chinaz.com">Bootstrap themes</a></li>
		</ul>
	</div>
</div>

<div class="clearfix"></div>

<footer>

	<p>
		<span style="text-align:left;float:left">Copyright &copy; 2020.Company name All rights reserved.</span>

	</p>

</footer>

<!-- start: JavaScript-->

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-migrate-1.0.0.min.js"></script>

<script src="js/jquery-ui-1.10.0.custom.min.js"></script>

<script src="js/jquery.ui.touch-punch.js"></script>

<script src="js/modernizr.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="js/jquery.cookie.js"></script>

<script src='js/fullcalendar.min.js'></script>

<script src='js/jquery.dataTables.min.js'></script>

<script src="js/excanvas.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.pie.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>

<script src="js/jquery.chosen.min.js"></script>

<script src="js/jquery.uniform.min.js"></script>

<script src="js/jquery.cleditor.min.js"></script>

<script src="js/jquery.noty.js"></script>

<script src="js/jquery.elfinder.min.js"></script>

<script src="js/jquery.raty.min.js"></script>

<script src="js/jquery.iphone.toggle.js"></script>

<script src="js/jquery.uploadify-3.1.min.js"></script>

<script src="js/jquery.gritter.min.js"></script>

<script src="js/jquery.imagesloaded.js"></script>

<script src="js/jquery.masonry.min.js"></script>

<script src="js/jquery.knob.modified.js"></script>

<script src="js/jquery.sparkline.min.js"></script>

<script src="js/counter.js"></script>

<script src="js/retina.js"></script>

<script src="js/custom.js"></script>

<script src="js/echarts.js"></script>
<script type="text/javascript">
	function chartOne() {
		$.post("../japafter/chartfirst.action", function (data) {
			console.log(data);
			var chartDom = document.getElementById('main1');
			var myChart = echarts.init(chartDom);
			var option;
			option = {
				series: [
					{
						name: '员工接单数量',
						type: 'pie',
						radius: '50%',
						data: data
					}
				]
			};
			option && myChart.setOption(option);
		}, "json");
	}

	function chartTwo() {
		$.post("../japafter/chartthree.action", function (data) {
			var chartDom = document.getElementById('main2');
			var myChart = echarts.init(chartDom);
			var option;
			console.log(data.names);
			console.log(data.values);
			option = {
				title: {
					text: '员工接单'
				},
				tooltip: {},
				legend: {
					data: ['数量']
				},
				xAxis: {
					data: data.names
				},
				yAxis: {},
				series: [{
					name: '数量',
					type: 'bar',
					data: data.values
				}]
			};
			option && myChart.setOption(option);
		}, "json");
	}

	function chartOneto() {
		$.post("../japafter/chartsecond.action", function (data) {
			console.log(data);
			var chartDom = document.getElementById('main3');
			var myChart = echarts.init(chartDom);
			var option;
			option = {
				series: [
					{
						name: '员工派单数量',
						type: 'pie',
						radius: '50%',
						data: data
					}]
			};
			option && myChart.setOption(option);
		}, "json");
	}

	function chartTwoto() {
		$.post("../japafter/chartfour.action", function (data) {
			var chartDom = document.getElementById('main4');
			var myChart = echarts.init(chartDom);
			var option;
			console.log(data.names);
			console.log(data.values);
			option = {
				title: {
					text: '员工派单'
				},
				tooltip: {},
				legend: {
					data: ['数量']
				},
				xAxis: {
					data: data.names
				},
				yAxis: {},
				series: [{
					name: '数量',
					type: 'bar',
					data: data.values
				}]
			};
			option && myChart.setOption(option);
		}, "json");
	}
</script>

<!-- end: JavaScript-->


</body>
</html>
